<template>
  <el-card>
    <template #header>
      <div style="float: right">
        <el-button @click="saveValidator" type="primary">提 交</el-button>
      </div>
    </template>
  </el-card>
  <el-scrollbar :height="height">
    <ts-card header="基本信息">
      <el-form :model="form" label-position="left">
        <el-row :gutter="20">
          <el-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6">
            <el-form-item label="对象属性名">
              <el-input v-model="form.name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6">
            <el-form-item label="标题">
              <el-input v-model="form.title"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6">
            <el-form-item label="验证id">
              <el-input v-model="form.id"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6">
            <el-form-item label="表名">
              <el-input v-model="form.tableName" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
            <el-form-item label="执行的方法集合">
              <el-select
              style="width:100%"
                multiple
                v-model="form.matchMethodsArray"
                clearable
                placeholder="请选择："
              >
                <el-option
                  v-for="item in configData.methodList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6">
            <el-form-item label="引用别的验证ID">
              <el-input v-model="form.extendGroupId" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6">
            <el-form-item label="自动验证表单">
              <el-switch v-model="form.autoValidate" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </ts-card>
    <ts-card header="验证字段规则列表">
      <template #header>
        <i style="float: right; margin-right: 10px" @click="saveValidatorRule">
          <el-icon>
            <Plus />
          </el-icon>
        </i>
      </template>
      <draggable v-model="dataList" animation="700">
        <template #item="{ item, index }">
          <ts-card style="margin-bottom: 20px">
            <template #header>
              <div style="display:flex;justify-content: space-between;">
              <div style="display:flex;align-items: center;"  >
              <span>规则{{ index + 1 }}</span>
              <el-form-item label="规则类型" style="margin-bottom:0;margin-left:10px">
                <el-select
                  v-model="dataList[index].ruleType"
                  clearable
                  placeholder="请选择："
                  @change="ValidatorRuleChange(index, $event)"
                >
                  <el-option
                    v-for="item in configData.validatorTypeList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              </div>
              <el-button
                style="float: right;margin-right:3px"
                @click="deleteValidatorRule(index)"
                type="danger"
                :icon="Delete"
                circle
              />
            </div>

            </template>

            <sc-form
              v-if="dataList[index].formConfig"
              v-model="dataList[index]"
              ref="formRef"
              :config="dataList[index].formConfig"
            >
              <template #content>
                <el-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6">
                  <el-form-item label="字段属性">
                    <el-input v-model="dataList[index].name" />
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6">
                  <el-form-item label="标题">
                    <el-input v-model="dataList[index].title" />
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6">
                  <el-form-item label="默认值">
                    <el-input v-model="dataList[index].defaultValue" />
                  </el-form-item>
                </el-col>
              </template>
              <template #footer>
                <el-col :xs="24" :sm="24" :md="24" :lg="18" :xl="18">
                  <el-form-item label="验证提示语句">
                    <el-input v-model="dataList[index].message" />
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                  <el-form-item label="执行的方法集合">
                    <el-select
                    style="width:100%"
                      multiple
                      v-model="dataList[index].matchMethodsArray"
                      clearable
                      placeholder="请选择："
                    >
                      <el-option
                        v-for="item in configData.methodList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col  v-if="dataList[index].ruleType === 'sql'" :span="24">
                  <el-form-item label="自定义属性">
                    <sc-form-table
                      v-model="dataList[index].params"
                      :addTemplate="paramsTemplate"
                      height="300"
                    >
                      <el-table-column label="key">
                        <template #default="scope">
                          <el-input v-model="scope.row.key"></el-input>
                        </template>
                      </el-table-column>
                      <el-table-column label="值">
                        <template #default="scope">
                          <el-input
                            style="width: 100%"
                            v-model="scope.row.value"
                          />
                        </template>
                      </el-table-column>
                    </sc-form-table>
                  </el-form-item>
                </el-col>
              </template>
            </sc-form>
          </ts-card>
        </template>
      </draggable>
    </ts-card>
  </el-scrollbar>
</template>
    <script setup>
import {
  ref,
  defineModel,
  computed,
  onMounted,
  inject,
  onBeforeMount,
} from "vue";
import { ElNotification } from "element-plus";
import API from "@/api/model/meta.js";
import { getValidatorFormConfig } from "./formConfig";
import draggable from "vuedraggable";
import { Plus, Delete } from "@element-plus/icons-vue";
import tool from "@/utils/tool";
const emit = defineEmits(["update", "init"]);
const form = defineModel();
const dataList = defineModel("dataList");
const props = defineProps({
  configData: { type: Array, default: [] },
  addTemplate: { type: Object, default: {} },
});
const paramsTemplate = {
  key: "",
  value: "",
};
const fileName = inject("fileName");
const height = computed(() => {
  let h;
  var iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
  if (!iOS) {
    h = window.innerHeight;
  } else {
    h = screen.height;
  }
  return h - 145;
});
onMounted(() => {
  dataList.value.forEach((ele) => {
    if (ele.ruleType) {
      ele.formConfig = getValidatorFormConfig(ele.ruleType, props.configData);
    }
  });
});
const ValidatorRuleChange = (index, val) => {
  if (val) {
    dataList.value[index].formConfig = getValidatorFormConfig(
      val,
      props.configData
    );
  }
};
const saveValidatorRule = () => {
  dataList.value.push(props.addTemplate);
};
const deleteValidatorRule = (index) => {
  dataList.value.splice(index, 1);
};
const saveValidator = async () => {
  let param = {
    fileName: fileName.value,
    bean: form.value,
    dataList: dataList.value.map((ele) => {
      ele.params = tool.convert.arrToMap(ele.params);
      delete ele.formConfig;
      const { formConfig, ...rest } = ele;
      return rest;
    }),
  };
  let res = await API.businessrule.saveOrUpdateValidator.post(param);
  if (res.code == 200) {
    ElNotification.success({
      title: "",
      message: "操作成功！",
      duration: 2000,
    });
    emit("update", { objectId: res.objectId });
    emit("init");
  }
};
</script>
    <style lang="less" scoped></style>
    